iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 9
0
Modern Web

CSS大全閱讀筆記系列 第 9

第二章:選擇器(7)

  • 分享至 

  • xImage
  •  

(接上篇的虛擬類別選擇器部分)


  1. 虛擬類別選擇器:
    f. target虛擬類別:當URL後含段落辨識碼(fragment indentifier,在URL後出現的井號字串,如https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Selector中的#Selector,點擊連結後會直接跳至該段落。增加段落辨識碼的方式有二:使用錨點,或是段落增加ID屬性),可用:target更改其段落樣式。當頁面URL中不含段落辨識碼,或是段落辨識碼在頁面中不存在對應元素,如https://en.wikipedia.org/wiki/Cascading_Style_Sheets#Select:target樣式無法生效。
    g. lang虛擬類別:想依語言選取元素時可用:lang(語言) {......},也可以使用前面的|=,寫作[lang|="語言"] {......},但|=只考慮元素本身的標記,:lang()除了元素本身標記,也會考慮meta元素和其他協定資訊,因此是更好的選擇。
    h. 否定虛擬類別:不同於其他需你類別的正面選擇,:not()是依元素缺少的條件選擇,寫法為:not(一個選擇器) {......},且選擇器不可寫有祖先後裔關係的選擇器(W3C的規範為類型選擇器、通用選擇器、屬性選擇器、ID選擇器或虛擬類別),所以正確寫法就像.item:not(.warm) {color: #000;},另外,不能用雙重否定:not(:not()),但允許有兩個同時否定條件:not():not() {......}```。
  2. 虛擬元素選擇器:
    a. 介紹:
    - 為了達到指定的效果,會在文件中插入不存在的元素。
    - 不同於虛擬類別使用一個半形冒號(:),虛擬元素目前的正確用法是使用兩個半形冒號(::),但因為在CSS2中只使用一個半形冒號,因此為了兼容,目前瀏覽器允許虛擬元素使用一個半形冒號。
    - 虛擬元素需放在整個選擇器的最後,因此一個選擇器只能有一個虛擬元素。
    b. 第一個字母與第一行內容:
    - 第一個字母:::first-letter可指定所有非行內元素的第一個字母,或是以標點開頭的標點與第一個字母,做出字首放大的效果,::first-letter只會作用在畫面上,不會影響原始碼或是DOM樹。
    - 第一行內容:::first-line用來改變首行文字,當因為更改字型大小、字母間距、親代容器寬度使第一行的內容發生變化,::first-line仍然只作用於改變後的第一行文字。
    - ::first-letter::first-line的限制: ::first-letter::first-line的使用對象,只能在標題或段落等區塊元素,超連結等行內元素是不能使用的。而在CSS屬性的使用上也有限制,兩者皆能用的屬性有font、background、text、border的所有屬性、color、opacity,另外::first-letter還可以使用box-shadow屬性,而::first-line則可以使用所有的border和padding相關屬性。
    d. 內容之前與之後的元素:如果想在元素前加上其他元素,在目標元素前可用::before {content:"插入內容"},目標元素後可用::after {content:"插入內容"},產生的內容是獨立個體,一定要加content才能使用,其他詳細用法與限制會在列表與生成內容中提到(第15章)。

上一篇
第二章:選擇器(6)
下一篇
第三章:權重與聯級(1)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言